<script lang="ts" setup>
import { useRouter } from "vue-router";
import { onMounted, ref, reactive } from "vue";
import { routes } from "@/router";
import type { ListItem } from "@/libs/useMenu";


const router = useRouter();


const dataSource = reactive<{
  list: ListItem[];
}>({
  list: routes
});

const active = ref("/");

onMounted(() => {
  router.beforeEach((to, from, next) => {
    active.value = to.path || "/";
    next();
  });
});
</script>
<template>
  <el-scrollbar>
    <el-menu
      :default-active="active"
      router
      popper-effect="light"
      background-color="#444"
      text-color="white"
      class="menu"
    >
      <div v-for="(item, index) of dataSource.list" :key="index">
        <el-sub-menu
          v-if="
            item.children &&
            item.children.length > 0 &&
            item.menu?.show &&
            menuAuth.hasAuth(item.auth)
          "
          :index="item.name"
        >
          <template #title>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item v-for="it of item.children" :index="it.path" :key="it.path">
            {{ it.name }}
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item :index="item.path" v-else-if="item.menu?.show && menuAuth.hasAuth(item.auth)">
          {{ item.name }}
        </el-menu-item>
      </div>
    </el-menu>
  </el-scrollbar>
</template>

<style scoped>
.menu {
  height: calc(100vh - 60px);
}
</style>
